<template>
  <a-affix :offset-top="themeStore.headerShow ? themeStore.getHeaderHeight : 0">
    <div class="router-history" id="driver-router-history">
      <div class="tab-bar-scroll">
        <TabItem
          v-for="(tag, index) in tagList"
          :key="tag.fullPath"
          :index="index"
          :item-data="tag"
        />
      </div>
    </div>
  </a-affix>
</template>

<script setup>
import { ref, computed, onBeforeUnmount } from "vue";
import { useTabBarStore } from "@/stores/modules/tab-bar";
import { useThemeStore } from "@/stores/modules/theme.js";
import TabItem from "./component/TabItem.vue";

const tabBarStore = useTabBarStore();
const themeStore = useThemeStore();

const tagList = computed(() => {
  return tabBarStore.getTabList;
});

onBeforeUnmount(() => {
  tabBarStore.resetTabList();
});
</script>

<style lang="less" scoped>
.router-history {
  display: flex;
  padding: 5px 20px 5px 20px;
  background-color: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border);
}

.tab-bar-scroll {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  overflow-x: auto;
  :deep(.arco-tag) {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    cursor: pointer;
    &:first-child {
      .arco-tag-close-btn {
        display: none;
      }
    }
  }
}
</style>
